<template>
  <el-container>
    <el-header>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="课程名称:">
          <el-input v-model="formInline.user" placeholder="课程名称"></el-input>
        </el-form-item>
        <el-form-item label="讲师:">
          <el-select v-model="formInline.region" placeholder="请选择讲师">
            <el-option label="张三" value="zhansan"></el-option>
            <el-option label="王五" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围:">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder=""
            end-placeholder="">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="课程编号"
          width="200px">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="上架时间"
          width="200px">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="课程名称"
          width="200px">
          <template slot-scope="scope">
            <i class="el-icon-user-solid"></i>
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="课程讲师"
          width="200px">
          <template slot-scope="scope">
            <i class="el-icon-user-solid"></i>
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="课程简介"
          width="300px">
          <template slot-scope="scope">
            <i class="el-icon-tickets"></i>
            <span style="margin-left: 10px">{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          >
          <template slot-scope="scope">
            <el-button
              size="mini"
              plain
              type="success"
              @click="checkDialogTableVisible = true">查看明细</el-button>
            <el-button
              size="mini"
              plain
              type="primary"
              @click="updateDialogTableVisible = true">修改</el-button>
            <el-button
              size="mini"
              type="danger"
              plain
              @click="deleteThisPlan">下架</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <template>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </template>
      </div>
    </el-main>
    <!--弹框-->
    <el-dialog title="课程信息" :visible.sync="checkDialogTableVisible">
      <el-card >
        <div>
          <el-descriptions class="margin-top"  :column="1" size="" border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                课程编号
              </template>
              kooriookami
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                课程名称
              </template>
              18100000000
              <div>
                <el-button type="text" @click="open">点击打开 Message Box</el-button>
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                课程简介
              </template>
              2021.1.3
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                学习方式
              </template>
              培训计划计划计划
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                考核类型
              </template>
              这是一个阿爸阿爸阿爸..
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                培训地点
              </template>
              A101
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                课程方向
              </template>
              这是一个阿爸阿爸阿爸..
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                上传时间
              </template>
              这是一个阿爸阿爸阿爸..
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                考试编号
              </template>
              这是一个阿爸
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
      <el-divider content-position="left">课程视频</el-divider>
      <el-table :data="gridData">
        <el-table-column property="date" label="视频编号" width="175px"></el-table-column>
        <el-table-column property="name" label="视频名称" width="175px"></el-table-column>
        <el-table-column property="name" label="视频时长" width="175px"></el-table-column>
        <el-table-column property="name" label="第几集" ></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="课程视频修改" :visible.sync="updateDialogTableVisible">
      <el-card >
        <div>
          <el-descriptions class="margin-top"  :column="1" size="" border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                课程名称
              </template>
              18100000000
              <el-button class="updateinfo" type="text" @click="open">修改课程名字</el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-outline"></i>
                课程简介
              </template>
              2021.1.3
              <el-button class="updateinfo" type="text" @click="open">修改课程简介</el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                学习方式
              </template>
              培训计划计划计划
              <el-button class="updateinfo" type="text" @click="open">修改课程学习方式</el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                考核类型
              </template>
              这是一个阿爸阿爸阿爸..
              <el-button class="updateinfo" type="text" @click="open">修改课程考核类型</el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                上课地点
              </template>
              A101
              <el-button class="updateinfo" type="text" @click="open">修改上课地点</el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                上课时间
              </template>
             2021.02.26 - 2021.03.26
              <el-button class="updateinfo" type="text" @click="open">修改上课时间</el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                考试时间
              </template>
              2021.02.26 18.00：-20：00 - 2021.03.26
              <el-button class="updateinfo" type="text" @click="open">修改考试时间</el-button>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-office-building"></i>
                课程方向
              </template>
              课程方向
              <el-button class="updateinfo" type="text" @click="open">修改课程方向</el-button>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
      <el-divider content-position="left">视频修改</el-divider>
      <el-button type="primary" @click="addCourseDialogTableVisible = true">增加新视频</el-button>
      <el-table :data="gridData">
        <el-table-column property="date" label="课程编号" width="175px"></el-table-column>
        <el-table-column property="name" label="课程名称" width="175px"></el-table-column>
        <el-table-column property="name" label="学习方式" width="175px"></el-table-column>
        <el-table-column property="name" label="培训地点" ></el-table-column>
        <el-table-column  ><el-button
          size="mini"
          type="danger"
          plain
          @click="deleteThisCourse">下架</el-button></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="增加当前培训计划" :visible.sync="addCourseDialogTableVisible">
      <el-upload
        auto-upload="false"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传视频压缩文件，上传顺序默认为视频集数</div>
      </el-upload>
    </el-dialog>
  </el-container>
</template>

<script>
    import {validateChinese} from "../../tools/validate";

    export default {
        name: "CourseCheckAndUpdate",
      data() {
        return {
          //上传文件的数据
          fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
          //弹窗状态
          checkDialogTableVisible: false,
          updateDialogTableVisible:false,
          addCourseDialogTableVisible:false,
          //头部表单数据
          formInline: {
            user: '',
            region: ''
          },
          //表格数据
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
            {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            },
            {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }],
          //信息弹窗数据
          gridData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }],

        }
      },
      methods: {
        //上传文件的控件方法
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        },
        //计划下架提示
        deleteThisPlan() {
          this.$confirm('此操作将永久删除XXX计划, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        //课程下架提示
        deleteThisCourse() {
          this.$confirm('此操作将永久删除XXX课程, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        //修改课程信息
        open() {
          this.$prompt('请输入邮箱', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
            inputErrorMessage: '邮箱格式不正确'
          }).then(({ value }) => {
            this.$message({
              type: 'success',
              message: '你的邮箱是: ' + value
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });
          });
        },
        onSubmit() {
          console.log('submit!');
        },
        handleClick(row) {
          console.log(row);
        }
      }
    }
</script>

<style scoped>
  .pagination{
    margin-top: 10px;
    position:relative;
    left:450px;
  }
  .updateinfo{
    float:right;
  }
</style>
